<!--
 * @Author: 王灿
 * @Date: 2019-11-28 08:37:58
 * @LastEditTime: 2019-12-01 19:53:18
 * @Description: 课程操作
 * @FilePath: \scarlet-sparrow-admin\src\views\course\course-management\course-operate\index.vue
 -->
<template>
  <happy-scroll color="rgba(0,0,0,0)" size="5" :resize="true" class="course-operate">
    <el-form :model="ruleForm" ref="ruleForm">
      <!-- 富文本 -->
      <el-form-item class="el-form__quill">
        <jq-tinymce
          ref="editor"
          v-model="ruleForm.highlights"
          :isUpdate="isUpdate"
          :minHeight="500"
          @input="onGetEditorValue"
        />
      </el-form-item>
      <el-form-item class="dialog-footer">
        <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
        <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
      </el-form-item>
    </el-form>
  </happy-scroll>
</template>

<script>
import JqTinymce from '@/components/jq-tinymce/index.vue'
import { getCourseHighlights } from '@/api/course.js'
export default {
  name: 'CourseOperate',
  components: { JqTinymce },
  props: {
    // 默认数据
    id: {
      type: Number,
      default: 0
    },
    // 精彩剪辑
    highlights: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isUpdate: false,
      ruleForm: {
        id: this.id,
        highlights: ''
      }
    }
  },
  watch: {
    // 监听精彩剪辑
    highlights() {
      this.ruleForm.highlights = this.highlights
    }
  },
  created() {
    this.ruleForm.highlights = this.highlights
  },
  methods: {
    // 赋值富文本
    onGetEditorValue(data) {
      this.isUpdate = true
      this.ruleForm.highlights = data
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 编辑精彩剪辑
            getCourseHighlights(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '编辑成功'
              })
              this.onRefresh()
            })
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false, isRefresh: false }
      this.$emit('onCancelBtn', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onCancelBtn', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.course-operate {
    height: 100%;
    padding-top: 22px;
    .el-form {
        width: 100%;
        .dialog-footer {
            @include row;
            justify-content: flex-end;
            margin-top: 22px;
        }
    }
}
</style>